<template>
  <div class="order-search-and-list-container">
    <!-- 搜索表单 -->
    <div class="search-form-wrapper">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <!-- 订单编号输入框 -->
        <el-form-item label="订单编号">
          <el-input v-model="form.ordersId" placeholder="请输入订单编号" clearable class="input-style" />
        </el-form-item>
        <!-- 订单状态下拉选择框 -->
        <el-form-item label="服务名称">
          <el-select
            v-model="form.serveItemId"
            placeholder="请选择服务名称"
            clearable
            style="width: 150px"
            class="select-style"
          >
            <el-option
              v-for="item in serveNames"
              :key="item.id"
              :label="item.serveName"
              :value="item.serveItemId"
            />
          </el-select>
        </el-form-item>
        <!-- 重置和查询按钮 -->
        <el-form-item>
          <el-button type="default" @click="resetForm" class="reset-button">重置</el-button>
          <el-button type="primary" @click="findList" class="search-button">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 订单列表展示 -->
    <div class="order-list-wrapper">
      <el-table :data="tableData" style="width: 100%" class="order-table">
        <!-- 序号 -->
        <el-table-column align="center" prop="id" label="序号" width="170px" />
        <!-- 订单编号列 -->
        <el-table-column align="center" prop="ordersId" label="订单编号" width="170px" />
        <!-- 服务类型 -->
        <el-table-column align="center" prop="serveTypeName" label="服务类型" />
        <!-- 服务名称 -->
        <el-table-column align="center" prop="serveName" label="服务名称" />
        <!-- 服务费用 -->
        <el-table-column align="center" prop="ordersAmount" label="服务费用（元）" />
        <!-- 预约时间 -->
        <el-table-column align="center" prop="serveStartTime" label="预约时间" />
        <!-- 订单状态列 -->
        <el-table-column align="center" prop="taskStatus" label="订单状态">
          <template #default="scope">
            <span v-if="scope.row.taskStatus === null">-</span>
            <el-button
              v-else
              class="custom-order-status-button"
              type="primary"
            >
              <span v-if="scope.row.taskStatus === 0">待分配</span>
              <span v-else-if="scope.row.taskStatus === 1">待服务</span>
              <span v-else-if="scope.row.taskStatus === 2">服务中</span>
              <span v-else-if="scope.row.taskStatus === 3">已完成</span>
              <span v-else-if="scope.row.taskStatus === 4">被退单</span>
              <span v-else-if="scope.row.taskStatus === 5">已取消</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="" width="95px">
          <template #default="scope">
            <el-button link v-if="scope.row.taskStatus == 0 || scope.row.taskStatus == 1" @click="exitOrder(scope.row.id)">取消订单</el-button>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column align="center" prop="address" label="操作" width="95px">
          <template #default="scope">
            <router-link :to="{path:'/orders/order/orderDetail',query:{id:scope.row.id}}">查看</router-link>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="" width="95px">
          <template #default="scope">
            <el-button link v-if="scope.row.taskStatus == 0" @click="renShow(scope.row.id)">人员分配</el-button>
            <el-button link v-else-if="scope.row.taskStatus == 1" @click="startServeShow(scope.row.id)">开始服务</el-button>
            <el-button link v-else-if="scope.row.taskStatus == 2" @click="endServeShow(scope.row.id)">完成服务</el-button>
            <el-button link v-else-if="scope.row.taskStatus == 3 || scope.row.taskStatus == 5" @click="isDeleteOrder(scope.row.id)">删除订单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="form.pageNum"
        v-model:page-size="form.pageSize"
        :page-sizes="[1, 20, 30, 40]"
        :size="paginationSize"
        :disabled="paginationDisabled"
        :background="paginationBackground"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
      />
<!--      分配人员-->
      <el-dialog
        v-model="renDialogVisible"
        title="分配人员"
        width="500"
        :before-close="handleClose"
      >请选择要分配的服务人：
        <el-select
          v-model="renForm.institutionStaffId"
          placeholder="请选择服务名称"
          clearable
          style="width: 150px"
          class="select-style"
        >
          <el-option
            v-for="item in instRen"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="instRenSbt()">提交</el-button>
            <el-button type="primary" @click="renDialogVisible = false">
              关闭
            </el-button>
          </div>
        </template>
      </el-dialog>
<!--      开始服务-->
      <el-dialog
        v-model="startServerDialogVisible"
        title="上传开始服务前信息"
        width="500"
        :before-close="handleClose"
      >
        <span style="color: red">*</span>服务前照片：
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9999/instOrder-orderService/minio/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <br/>
        补充说明：
        <br/>
        <el-input
          v-model="renForm.serveBeforeIllustrate"
          maxlength="50"
          style="width: 240px"
          placeholder="请输入："
          show-word-limit
          type="textarea"
        />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="startServeSbt()">提交</el-button>
            <el-button type="primary" @click="startServerDialogVisible = false">
              关闭
            </el-button>
          </div>
        </template>
      </el-dialog>
<!--      结束服务-->
      <el-dialog
        v-model="endServerDialogVisible"
        title="上传结束服务后信息"
        width="500"
        :before-close="handleClose"
      >
        <span style="color: red">*</span>服务后照片：
        <el-upload
          class="avatar-uploader"
          action="http://localhost:9999/instOrder-orderService/minio/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <br/>
        补充说明：
        <br/>
        <el-input
          v-model="renForm.serveAfterIllustrate"
          maxlength="50"
          style="width: 240px"
          placeholder="请输入："
          show-word-limit
          type="textarea"
        />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="endServeSbt()">提交</el-button>
            <el-button type="primary" @click="endServerDialogVisible = false">
              关闭
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  delOrder,
  exitOrders,
  findAll,
  findServeName,
  institutionStaffList,
  updateRen
} from "@/api/orders/order";
import {ElMessage} from "element-plus";
import { Plus } from '@element-plus/icons-vue'

// 订单列表数据
const tableData = ref([]);
// 搜索表单数据
const form = ref({
  pageNum: 1,
  pageSize: 10,
  id: null,
  ordersId: null,
  serveItemId: null,
});
// 总订单数
const total = ref(0);
// 分页相关配置
const paginationSize = ref('');
const paginationDisabled = ref(false);
const paginationBackground = ref(true);

const serveNames = ref([])
const serveNameList = () => {
  findServeName().then((res) => {
    console.log(res.data)
    serveNames.value=res.data.data
  });
};
serveNameList()
// 查询订单列表数据
const findList = () => {
  findAll(form.value).then((res) => {
    tableData.value = res.data.data.records;
    console.log(res.data);
    total.value = res.data.data.total;
  });
};
// 初始化查询订单列表数据
findList();

// 处理分页每页数量变化
const handlePageSizeChange = (newPageSize) => {
  form.value.pageSize = newPageSize;
  findList();
};

// 处理分页当前页变化
const handlePageCurrentChange = (newPageNum) => {
  form.value.pageNum = newPageNum;
  findList();
};


// 重置搜索表单
const resetForm = () => {
  form.value.pageNum = 1;
  form.value.pageSize = 10;
  form.value.ordersId = '';
  form.value.serveItemId = '';
  findList();
};
const renDialogVisible = ref(false)
const renForm = ref({
  id: null,
  institutionStaffId: null,
  serveBeforeImgs:null,
  serveBeforeIllustrate:null,
  serveAfterImgs:null,
  serveAfterIllustrate:null,
})
const instRen = ref([])
const instRenList = () =>{
  institutionStaffList().then((res) => {
    console.log(res.data)
    instRen.value = res.data
  })
}
instRenList()
const instRenSbt = () =>{
  console.log(renForm.value)
  updateRen(renForm.value).then((res)=>{
    console.log(res.data)
    findList()
    renDialogVisible.value = false
    ElMessage.success("成功")
  })
}
const renShow = (id) =>{
  renDialogVisible.value = true
  renForm.value.id=id
  renForm.value.institutionStaffId=null
}
const instServeSbt=(id) =>{
  console.log(id)
  renForm.value.id=id
  updateRen(renForm.value).then((res)=>{
    console.log(res.data)
    findList()
    ElMessage.success("成功")
  })
}
const isDeleteOrder = (id) =>{
  console.log(id)
  if(confirm("是否删除")) {
    delOrder(id).then((res) => {
      console.log(res.data)
      findList()
      ElMessage.success("删除成功")
    })
  }
}
const exitOrder = (id) =>{
  console.log(id)
  exitOrders(id).then((res) => {
    console.log(res.data)
    findList()
    ElMessage.success("取消成功")
  })
}
const startServerDialogVisible = ref(false)
const imageUrl = ref('')

const handleAvatarSuccess = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  console.log(uploadFile.raw)
  console.log("----------------")
  console.log(response.errorMessage)
  renForm.value.serveBeforeImgs=response.errorMessage
}

const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('请转上传image或者jpeg图片')
    return false
  } else if (rawFile.size / 5120 / 5120 > 2) {
    ElMessage.error('该图片不能大于5MB!')
    return false
  }
  return true
}
const startServeShow = (id) =>{
  renForm.value={}
  startServerDialogVisible.value = true
  renForm.value.id=id
}
const startServeSbt = ()=>{
  console.log(renForm.value)
  updateRen(renForm.value).then((res)=>{
    console.log(res.data)
    findList()
    startServerDialogVisible.value = false
    ElMessage.success("服务开始")
  })
}
const endServerDialogVisible = ref(false)
const endServeShow = (id) =>{
  renForm.value={}
  endServerDialogVisible.value = true
  renForm.value.id=id
}
const endServeSbt = ()=>{
  console.log(renForm.value)
  updateRen(renForm.value).then((res)=>{
    console.log(res.data)
    findList()
    endServerDialogVisible.value = false
    ElMessage.success("服务结束")
  })
}
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
<style scoped>
/* 整体容器样式 */
.order-search-and-list-container {
  padding: 20px;
  background-color: #f9f9f9;
}

/* 搜索表单样式 */
.search-form-wrapper {
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

/* 输入框样式 */
.input-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
}

/* 下拉选择框样式 */
.select-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 重置按钮样式 */
.reset-button {
  margin-right: 10px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #333;
  padding: 0 15px;
}

/* 查询按钮样式 */
.search-button {
  height: 32px;
  line-height: 32px;
  border: 1px solid #0a9fe5;
  border-radius: 4px;
  background-color: #0a9fe5;
  color: white;
  padding: 0 15px;
}

/* 订单表格样式 */
.order-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.order-table th,
.order-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: center;
}

.order-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 自定义订单状态按钮样式 */
.custom-order-status-button {
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 4px;
}

/* 分页样式 */
.pagination-style {
  margin-top: 10px;
  text-align: right;
}

.pagination-style.el-pagination {
  display: inline-block;
}
</style>
